<template>
  <div class="top_o">
    <el-card class="box-card" :style="{height:WindowHeight - cardHeight + 'px'}">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待办" name="first">
          <el-table
            :data="tableData1"
            style="width:100%;"
            border
            stripe
            :max-height="WindowHeight - tabHeight"
          >
            <el-table-column label="序号" type="index" width="70px" align="center" />
            <el-table-column prop="bxdh" label="报销单号" width="160px" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.bxdh)" v-text="scope.row.bxdh" />
              </template>
            </el-table-column>
            <el-table-column prop="bxdw" label="报销单位" width="180" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.bxdw)" v-text="scope.row.bxdw" />
              </template>
            </el-table-column>
            <el-table-column prop="bxbm" label="报销部门" width="140px" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.bxbm)" v-text="scope.row.bxbm" />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="报销人" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.name)" v-text="scope.row.name" />
              </template>
            </el-table-column>
            <el-table-column prop="bxje" label="报销金额（单位/元）" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.bxje)">
                  <span v-text="scope.row.bxje" />
                  <span>元</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="bxrq" label="报销日期" width="160" align="center" />
            <el-table-column prop="pszt" label="审批状态" align="center" />
            <el-table-column label="操作" width="170px" align="center">
              <el-button size="small" type="info" @click="showChaiLvFBX">查看</el-button>
              <el-button size="small" type="warning" @click="chuliChaiLvFBX">处理</el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已发起" name="second">
          <el-table
            :data="tableData"
            style="width:100%;"
            border
            stripe
            fit
            :max-height="WindowHeight - tabHeight"
            highlight-current-row
          >
            <el-table-column label="序号" type="index" width="70px" align="center" />
            <el-table-column prop="bxdh" label="报销单号" width="160px" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.bxdh)" v-text="scope.row.bxdh" />
              </template>
            </el-table-column>
            <el-table-column prop="bxdw" label="报销单位" width="180" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.bxdw)" v-text="scope.row.bxdw" />
              </template>
            </el-table-column>
            <el-table-column prop="bxbm" label="报销部门" width="140px" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.bxbm)" v-text="scope.row.bxbm" />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="报销人" align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.name)" v-text="scope.row.name" />
              </template>
            </el-table-column>
            <el-table-column prop="bxje" label="报销金额（单位/元）" align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.bxje)">
                  <span v-text="scope.row.bxje" />
                  <span>元</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="bxrq" label="报销日期" width="160" align="center" />
            <el-table-column prop="pszt" label="审批状态" align="center" />
            <el-table-column label="操作" width="170px" align="center">
              <el-button size="small" type="info" @click="showChaiLvFBX">查看</el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="全部" name="third">
          <el-table
            :data="tableData"
            style="width:100%;"
            :max-height="WindowHeight - tabHeight"
            border
            stripe
            highlight-current-row
          >
            <el-table-column label="序号" type="index" width="70px" align="center" />
            <el-table-column prop="bxdh" label="报销单号" width="160px" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.bxdh)" v-text="scope.row.bxdh" />
              </template>
            </el-table-column>
            <el-table-column prop="bxdw" label="报销单位" width="180" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.bxdw)" v-text="scope.row.bxdw" />
              </template>
            </el-table-column>
            <el-table-column prop="bxbm" label="报销部门" width="140px" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.bxbm)" v-text="scope.row.bxbm" />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="报销人" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.name)" v-text="scope.row.name" />
              </template>
            </el-table-column>
            <el-table-column prop="bxje" label="报销金额（单位/元）" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.bxje)">
                  <span v-text="scope.row.bxje" />
                  <span>元</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="bxrq" label="报销日期" width="160" align="center" />
            <el-table-column prop="pszt" label="审批状态" align="center" />
            <el-table-column label="操作" width="170px" align="center">
              <el-button size="small" type="info" @click="showChaiLvFBX">查看</el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <el-button-group class="BtnAll">
        <el-button size="small" type="primary" @click="newChaiLvFBX">新增差旅费报销</el-button>
      </el-button-group>
      <div class="bottom">
        <page />
      </div>

      <router-view />
      <component :is="configName" />
    </el-card>

 
  </div>
</template>

<script>
import page from '@/views/rfcwgl/components/PageS/index.vue'
import Vue from 'vue'
export default {
  components: { page },
  data() {
    return {
      WindowHeight: document.body.clientHeight,
      configName: '',
      addPath: {
        configName: 'addchailvfbx',
        configFilePath: 'rfcwgl/chaiLvFBX/append/chaiLvFBXAppend/index.vue'
      },
      showPath: {
        configName: 'showchuchailvfbx',
        configFilePath: 'rfcwgl/chaiLvFBX/show/chaiLvFBXShow/index.vue'
      },
      chuliPath: {
        configName: 'chulichailvfbx',
        // configFilePath: 'rfcwgl/components/chuLiYM/buMenFZRYM/index.vue'
        // configFilePath: 'rfcwgl/components/chuLiYM/caiWuCNYM/index.vue'
        // configFilePath: 'rfcwgl/components/chuLiYM/caiWuZGYM/index.vue'
        configFilePath: 'rfcwgl/components/chuLiYM/caiWuZJYM/index.vue'
        // configFilePath: 'rfcwgl/components/chuLiYM/zongJingLYM/index.vue'
        // configFilePath: 'rfcwgl/chaiLvFBX/edit/chaiLvFBXEdit/index.vue'
      },
      cardHeight: 84,
      tabHeight: 180,
      addEvection: false,
      isEvection: false,
      isElookover: false,
      hidmang: false,
      activeName: 'first',
      tableData: [
        {
          id: 1,
          bxdh: '00000001',
          bxdw: '华电',
          bxbm: '现场部',
          name: '张三',
          bxje: 3.0,
          bxrq: '2020-2-20',
          ywcsp: '结束',
          pszt: '部门审批'
        },
        {
          id: 2,
          bxdh: '00000001',
          bxdw: '北京利宇科技公司',
          bxbm: '科研项目部',
          name: '李四',
          bxje: 11212.29,
          bxrq: '2020-3-24',
          ywcsp: '结束',
          pszt: '公司审批'
        },
        {
          id: 3,
          bxdh: '00000003',
          bxdw: '华电',
          bxbm: '董事',
          name: '王大',
          bxje: 543.0,
          bxrq: '2020-5-11',
          ywcsp: '结束',
          pszt: '部门审批'
        }
      ],
      tableData1: [
        {
          id: 1,
          bxdh: '00000011',
          bxdw: '华电',
          bxbm: '现场部',
          name: '诸葛亮',
          bxje: 3.0,
          bxrq: '2000-2-20',
          ywcsp: '结束',
          pszt: '财务审批'
        },
        {
          id: 2,
          bxdh: '00210311',
          bxdw: '北京利宇科技公司',
          bxbm: '科研项目部',
          name: '刘备',
          bxje: 11212.29,
          bxrq: '1999-3-24',
          ywcsp: '结束',
          pszt: '经理审批'
        },
        {
          id: 3,
          bxdh: '00003203',
          bxdw: '哎拉粑粑',
          bxbm: '技术部',
          name: '曹操',
          bxje: 1234.0,
          bxrq: '2013-5-11',
          ywcsp: '结束',
          pszt: '财务总监审批'
        },
        {
          id: 4,
          bxdh: '01002003',
          bxdw: '拼多多',
          bxbm: '技术部',
          name: '黄盖',
          bxje: 4432.0,
          bxrq: '2020-5-11',
          ywcsp: '结束',
          pszt: '部门审批'
        },
        {
          id: 5,
          bxdh: '00346003',
          bxdw: '京东',
          bxbm: '技术部',
          name: '吕布',
          bxje: 600.0,
          bxrq: '2020-5-11',
          ywcsp: '结束',
          pszt: '财务总监审批'
        },
        {
          id: 6,
          bxdh: '00600783',
          bxdw: '淘宝',
          bxbm: '技术部',
          name: '赵云',
          bxje: 400.0,
          bxrq: '2020-5-11',
          ywcsp: '结束',
          pszt: '部门审批'
        },
        {
          id: 7,
          bxdh: '00000003',
          bxdw: '天猫',
          bxbm: '总监办',
          name: '诸葛瑾',
          bxje: 200.0,
          bxrq: '2020-5-11',
          ywcsp: '结束',
          pszt: '财务总监审批'
        },
        {
          id: 8,
          bxdh: '00000003',
          bxdw: '美团外卖',
          bxbm: '员工部',
          name: '周瑜',
          bxje: 10000.0,
          bxrq: '1998-5-11',
          ywcsp: '结束',
          pszt: '部门审批'
        },
        {
          id: 9,
          bxdh: '00000003',
          bxdw: '饿了吗',
          bxbm: '行政部',
          name: '孙权',
          bxje: 300.0,
          bxrq: '2020-5-12',
          ywcsp: '结束',
          pszt: '部门审批'
        },
        {
          id: 10,
          bxdh: '00000003',
          bxdw: '腾讯',
          bxbm: '技术部',
          name: '司马懿',
          bxje: 1214.0,
          bxrq: '1234-5-11',
          ywcsp: '结束',
          pszt: '部门审批'
        },
        {
          id: 11,
          bxdh: '00000003',
          bxdw: '华电',
          bxbm: '人事部',
          name: '张三',
          bxje: 23425.0,
          bxrq: '1889-5-11',
          ywcsp: '结束',
          pszt: '部门审批'
        },
        {
          id: 12,
          bxdh: '00000003',
          bxdw: '华电',
          bxbm: '研发部',
          name: '张三',
          bxje: 144656.0,
          bxrq: '2020-5-11',
          ywcsp: '结束',
          pszt: '部门审批'
        },
        {
          id: 13,
          bxdh: '00000003',
          bxdw: '华电',
          bxbm: '项目部',
          name: '张三',
          bxje: 12465576.0,
          bxrq: '2018-5-11',
          ywcsp: '结束',
          pszt: '部门审批'
        },
        {
          id: 14,
          bxdh: '00000003',
          bxdw: '华电',
          bxbm: '技术部',
          name: '张三',
          bxje: 1235.0,
          bxrq: '2015-5-11',
          ywcsp: '结束',
          pszt: '部门审批'
        }
      ]
    }
  },
  computed: {
    windowHeight() {
      return this.$store.state.windowH.height
    },
    tagsView() {
      return this.$store.state.settings.tagsView
    }
  },
  watch: {
    windowHeight: function(old, newd) {
      this.WindowHeight = old
    },
    tagsView: function(old, newd) {
      this.ifTagsView(old)
    }
  },
  created() {
    this.ifTagsView(this.$store.state.settings.tagsView)
  },
  beforeUpdate() {},
  methods: {
    ifTagsView(data) {
      if (data) {
        this.cardHeight = 84
        this.tabHeight = 180
      } else {
        this.cardHeight = 50
        this.tabHeight = 155
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    openWndow(e) {
      this.configName = Vue.component(e.configName, resolve => {
        require([`@/views/${e.configFilePath}`], resolve)
      })
    },
    newChaiLvFBX() {
      this.openWndow(this.addPath)
    },
    showChaiLvFBX() {
      this.openWndow(this.showPath)
    },
    chuliChaiLvFBX() {
      this.openWndow(this.chuliPath)
    },
    setAlign(data) {
      const type = typeof data
      // console.log(type)
      if (type === 'text') {
        return 'left'
      } else if (type === 'date') {
        return 'center'
      } else if (type === 'string') {
        return 'left'
      } else if (type === 'boolean') {
        return 'center'
      } else if (type === 'number') {
        // console.log(data)
        return 'right'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.BtnAll {
  position: absolute;
  right: 20px;
  top: 20px;
}
::v-deep .el-tabs__header {
  margin: 0px;
}
</style>
